<template>
    <div id="ManagementGenealogy"
         v-loading="loadingTree"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
    >
        <div v-if="cardShow" id="msk" style="z-index: 1000;
                    background-color: #cccccc;
                    height: 100%;
                    width: 100%;
                    position: fixed;
                    opacity: 0.5;
                    ">
        </div>
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-aside width="15%" style="background-color: white;
            color: #333;
            line-height: normal;
            padding: 10px;">
                <!--                <div style="min-height: 95%;-->
                <!--                            border-right: 1px dashed darkgrey;-->
                <!--                            padding-right: 5px;"-->

                <!--                >-->
                <div style="display: flex">
                    <el-input
                            class="textSearch"
                            style="width: 200px; flex: 90%"
                            placeholder="搜索"
                            prefix-icon="el-icon-search"
                            v-model="filterText">
                    </el-input>
                    <el-tooltip class="item" effect="dark" content="点此添加祖宗第一代" placement="top"
                                style="flex: 10%; margin-left: 10px">
                        <el-button type="primary" icon="el-icon-folder-add" circle
                                    @click="ancestorsShow"></el-button>
                    </el-tooltip>
                </div>


                <el-tree
                        class="filter-tree"
                        :data="personInfo"
                        :props="defaultProps"
                        :indent="10"
                        highlight-current
                        :auto-expand-parent="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        @node-click="checkId"

                        style=""
                >
                </el-tree>

                <!--                </div>-->
            </el-aside>
            <el-container>
                <el-main
                        v-loading="loadingTable"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                >
                    <div style="margin-bottom: 10px">当前人：{{currentPerson.name}}
                    </div>

                    <el-table :data="personDate" border width="100%" height="600px">
                        <el-table-column label="序号" align="center" width="60px" type="index">
                        </el-table-column>
<!--                        <el-table-column prop="id" label="id" align="center" width="60px">-->
<!--                        </el-table-column>-->
                        <el-table-column label="关系" align="center">
                            <template slot-scope="scope">
                                <p v-if="scope.row.fatherId === currentPerson.id && scope.row.sex == '男'">
                                    父子
                                </p>
                                <p v-else-if="scope.row.fatherId === currentPerson.id && scope.row.sex == '女'">
                                    父女
                                </p>
                                <p v-else-if="scope.row.spouseId === currentPerson.id">
                                    夫妻
                                </p>
                                <p v-else>
                                    爷孙
                                </p>
                            </template>
                        </el-table-column>

                        <el-table-column label="姓名" align="center">
                            <template slot-scope="scope">
                                <el-input v-show="scope.row.showEdit"
                                          v-model="scope.row.name"
                                          @input="scope.row.name"
                                >
                                </el-input>
                                <span v-show="!scope.row.showEdit">{{scope.row.name}}</span>
                            </template>
                        </el-table-column>

<!--                        <el-table-column label="showEdit" align="center">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span>{{scope.row.showEdit}}</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->

                        <el-table-column label="性别" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-select v-show="scope.row.showEdit" v-model="scope.row.sex" placeholder="请选择">
                                    <el-option
                                            v-for="item in sexSelect"
                                            :key="item.sexVal"
                                            :label="item.label "
                                            :value="item.sexVal">
                                    </el-option>
                                </el-select>
                                <span v-show="!scope.row.showEdit">{{scope.row.sex}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="年龄" align="center" width="100px">
                            <template slot-scope="scope">
                            <span>{{getAge(scope.row.birthDate)}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="出生日期" align="center" width="230px">
                            <template slot-scope="scope">
                                <el-date-picker
                                        class="date-age"
                                        prefix-icon="none"
                                        :clearable=false
                                        style="width: 90%; padding:0!important;"
                                        v-show="scope.row.showEdit"
                                        v-model="scope.row.birthDate"
                                        type="date"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                                <span v-show="!scope.row.showEdit">{{scope.row.birthDate}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="generation" label="学历" align="center">
                            <template slot-scope="scope">
                                <el-select v-show="scope.row.showEdit" v-model="scope.row.generation" placeholder="请选择">
                                    <el-option
                                            v-for="item in generationSelect"
                                            :key="item.generationVal"
                                            :label="item.label "
                                            :value="item.generationVal">
                                    </el-option>
                                </el-select>
                                <span v-show="!scope.row.showEdit">{{scope.row.generation}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="military" label="兵役情况" align="center">
                            <template slot-scope="scope">
                                <el-select v-show="scope.row.showEdit" v-model="scope.row.military" placeholder="请选择">
                                    <el-option
                                            v-for="item in militarySelect"
                                            :key="item.militaryVal"
                                            :label="item.label "
                                            :value="item.militaryVal">
                                    </el-option>
                                </el-select>
                                <span v-show="!scope.row.showEdit">{{scope.row.military}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ranking" label="排行" align="center">
                            <template slot-scope="scope">
                                <el-select v-show="scope.row.showEdit" v-model="scope.row.ranking" placeholder="请选择">
                                    <el-option
                                            v-for="item in rankingSelect"
                                            :key="item.rankingVal"
                                            :label="item.label "
                                            :value="item.rankingVal">
                                    </el-option>
                                </el-select>
                                <span v-show="!scope.row.showEdit">{{scope.row.ranking}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="livingState" label="在世状态" align="center">
                            <template slot-scope="scope">
                                <el-select v-show="scope.row.showEdit"
                                           :value="scope.row.livingState"
                                           v-model="scope.row.livingState"
                                           placeholder="请选择">
                                    <el-option
                                            v-for="item in living"
                                            :key="item.livingVal"
                                            :label="item.label "
                                            :value="item.livingVal">
                                    </el-option>
                                </el-select>

                                <span v-show="!scope.row.showEdit">
                                <template v-if="scope.row.livingState == '已故'">
                                    <el-tag type="danger" effect="dark"
                                            style="width: 100%"
                                    >已故
                                    </el-tag>
                                </template>
                                <template v-else-if="scope.row.livingState == '在世'">
                                    <el-tag type="success" effect="dark"
                                            style="width: 100%"
                                    >在世
                                    </el-tag>
                                </template>
                                <template v-else-if="scope.row.livingState == '未知'">
                                    <el-tag type="info" effect="dark"
                                            style="width: 100%"
                                    >未知
                                    </el-tag>
                                </template>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="200px">

                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" content="点击查看详情信息" placement="top" v-show="!scope.row.showEdit">
                                    <el-button type="primary" icon="el-icon-position" circle
                                               @click="checkPersonDate(scope.row.id)"></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="点击编辑基本信息" placement="top" v-show="!scope.row.showEdit">
                                    <el-button type="primary" icon="el-icon-edit" circle
                                               @click="scope.row.showEdit = true; checkUpdate(scope.row.id)"></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="点击删除该族员" placement="top"  v-show="!scope.row.showEdit">
                                    <el-button type="danger" icon="el-icon-delete" circle
                                                @click="delPopup(scope.row.id)"
                                    ></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="确认修改信息" placement="top" v-show="scope.row.showEdit">
                                    <el-button type="primary" icon="el-icon-finished" circle
                                               @click="updatePersonalData(scope.row)"></el-button>
                                </el-tooltip>

                                <el-tooltip class="item" effect="dark" content="取消操作" placement="top" v-show="scope.row.showEdit">
                                    <el-button type="primary" icon="el-icon-close" circle
                                               @click="scope.row.showEdit = false"></el-button>
                                </el-tooltip>
                            </template>


                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px" v-show="buttonDiv">
                        <el-button type="primary" @click="childrenCard=true, cardShow=true">添加子代</el-button>
                        <el-button type="danger" @click="spouseCard=true, cardShow=true">添加配偶</el-button>
                    </div>

                    <!--         添加祖宗第一代的卡片           -->
                    <el-card
                            v-show="intoAncestorsCard"
                            style="top: 25%!important;z-index: 1001"
                            class="intoChildrenCard"
                            v-loading="loadingCard"
                            element-loading-text="正在添加第一代祖宗"
                            element-loading-spinner="el-icon-loading"
                    >
                        <div slot="header" class="clearfix">
                            <span style="font-weight: bold; font-size: 20px">添加第一代祖宗信息</span>
                        </div>
                        <el-form label-width="80px" title="添加第一代祖宗信息">
                            <el-form-item label="管理员id" v-show="false">
                                <el-input v-model="intoAncestorsData.adminId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="intoAncestorsData.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getIntoAncestors" style="margin-right: 30px">添加第一代祖宗
                                </el-button>
                                <el-button @click="intoAncestorsCard=false, cardShow = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>

                    <!--         添加子代的卡片           -->
                    <el-card class="intoChildrenCard" v-show="childrenCard"
                             style="z-index: 1001"
                             v-loading="loadingCard"
                             element-loading-text="正在添加子代"
                             element-loading-spinner="el-icon-loading"
                    >
                        <div slot="header" class="clearfix">
                            <span style="font-weight: bold; font-size: 20px">添加子代</span>
                        </div>
                        <el-form label-width="80px" title="添加子代信息">
                            <el-form-item label="父亲id" v-show="false">
                                <el-input v-model="intoChildrenData.fatherId"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员id" v-show="false">
                                <el-input v-model="intoChildrenData.adminId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="intoChildrenData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio v-model="intoChildrenData.sex" label="男">男</el-radio>
                                <el-radio v-model="intoChildrenData.sex" label="女">女</el-radio>
                            </el-form-item>
                            <el-form-item label="出生日期">
                                <el-date-picker
                                        style="width: 207px;"
                                        v-model="intoChildrenData.birthDate"
                                        type="date"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="学历">
                                <el-select v-model="intoChildrenData.generation" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in generationSelect"
                                            :key="item.generationVal"
                                            :label="item.label "
                                            :value="item.generationVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="兵役情况">
<!--                                <el-input v-model="intoChildrenData.military"></el-input>-->
                                <el-select v-model="intoChildrenData.military" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in militarySelect"
                                            :key="item.militaryVal"
                                            :label="item.label "
                                            :value="item.militaryVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="排行">
<!--                                <el-input v-model="intoChildrenData.ranking"></el-input>-->
                                <el-select v-model="intoChildrenData.ranking" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in rankingSelect"
                                            :key="item.rankingVal"
                                            :label="item.label "
                                            :value="item.rankingVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="在世状态">
                                <el-select v-model="intoChildrenData.livingState" placeholder="请选择"
                                          >
                                    <el-option
                                            v-for="item in living"
                                            :key="item.livingVal"
                                            :label="item.label "
                                            :value="item.livingVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="intoChildren" style="margin-right: 30px">添加子代
                                </el-button>
                                <el-button @click="childrenCard=false,  cardShow=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>

                    <!--         添加配偶的卡片           -->
                    <el-card class="intoChildrenCard" v-show="spouseCard"
                             style="z-index: 1001"
                             v-loading="loadingCard"
                             element-loading-text="正在添加配偶"
                             element-loading-spinner="el-icon-loading"
                    >
                        <div slot="header" class="clearfix">
                            <span style="font-weight: bold; font-size: 20px">添加配偶</span>
                        </div>
                        <el-form label-width="80px" title="添加配偶信息">
                            <el-form-item label="配偶id" v-show="false">
                                <el-input v-model="intoSpouseData.spouseId"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员id" v-show="false">
                                <el-input v-model="intoSpouseData.adminId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="intoSpouseData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio v-model="intoSpouseData.sex" label="男">男</el-radio>
                                <el-radio v-model="intoSpouseData.sex" label="女">女</el-radio>
                            </el-form-item>
                            <el-form-item label="出生日期">
                                <el-date-picker
                                        style="width: 207px;"
                                        v-model="intoSpouseData.birthDate"
                                        type="date"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="学历">
                                <el-select v-model="intoSpouseData.generation" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in generationSelect"
                                            :key="item.generationVal"
                                            :label="item.label "
                                            :value="item.generationVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="兵役情况">
                                <el-select v-model="intoSpouseData.military" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in militarySelect"
                                            :key="item.militaryVal"
                                            :label="item.label "
                                            :value="item.militaryVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="排行">
                                <el-select v-model="intoSpouseData.ranking" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in rankingSelect"
                                            :key="item.rankingVal"
                                            :label="item.label "
                                            :value="item.rankingVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="在世状态">
                                <el-select v-model="intoSpouseData.livingState" placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in living"
                                            :key="item.livingVal"
                                            :label="item.label "
                                            :value="item.livingVal">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="intoSpouse" style="margin-right: 30px">添加配偶
                                </el-button>
                                <el-button @click="spouseCard=false, cardShow = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "ManagementGenealogy",
        data() {
            return {
                cardShow:false,
                indexId: 0,
                // showEdit:false,
                id: '',
                livingVal: '',
                living: [
                    {livingVal: "未知", label: '未知'},
                    {livingVal: "在世", label: '在世'},
                    {livingVal: "已故", label: '已故'},
                ],
                rankingVal: '',
                rankingSelect: [
                    {rankingVal: "一", label: '一'},
                    {rankingVal: "二", label: '二'},
                    {rankingVal: "三", label: '三'},
                    {rankingVal: "四", label: '四'},
                    {rankingVal: "五", label: '五'},
                    {rankingVal: "六", label: '六'},
                    {rankingVal: "七", label: '七'},
                    {rankingVal: "八", label: '八'},
                ],
                militaryVal: '',
                militarySelect: [
                    {militaryVal: "未知", label: '未知'},
                    {militaryVal: "无兵役记录", label: '无兵役记录'},
                    {militaryVal: "服役两年", label: '服役两年'},
                ],
                sexVal: '',
                sexSelect: [
                    {sexVal: "未知", label: '未知'},
                    {sexVal: "男", label: '男'},
                    {sexVal: "女", label: '女'},
                ],
                generationSelectVal: '',
                generationSelect: [
                    {generationVal: "未知", label: '未知'},
                    {generationVal: "未就读", label: '未就读'},
                    {generationVal: "小学", label: '小学'},
                    {generationVal: "初中", label: '初中'},
                    {generationVal: "中职", label: '中职'},
                    {generationVal: "高中", label: '高中'},
                    {generationVal: "大专", label: '大专'},
                    {generationVal: "本科", label: '本科'},
                    {generationVal: "研究生", label: '研究生'},
                    {generationVal: "硕士", label: '硕士'},
                    {generationVal: "博士", label: '博士'},
                    {generationVal: "博士后", label: '博士后'},
                ],
                accordion: 'true',
                personCard: false,
                intoAncestorsCard: false,
                loadingCard: false,
                loadingTable: false,
                loadingTree: true,
                buttonDiv: false,
                childrenCard: false,
                spouseCard: false,
                token: localStorage.getItem('TOKEN'),
                userInfo: {},
                personDate: [],
                intoSpouseData: {},
                intoChildrenData: {},
                currentPerson: {},
                person: {},
                personInfo: [],
                updatePerson:{},
                intoAncestorsData: {},
                filterText: '',
                personId: '',
                delId:'',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },

            }
        },
        created() {
            this.showTree();
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {

            delPopup(e){
                this.$confirm('此操作将永久删除该成员(包括视频/图片), 是否继续?', '删除提示', {
                    //
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.deletePersonalData(e);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //删除族员
            deletePersonalData(e){
                // 用PATCH方式调用后端接口
                this.$axios.delete(`/api/personaldata/manage/delete/${e}`).then((res) => {
                    if (res.data.status === 1) {
                        this.inforChildrenData(this.intoChildrenData.fatherId);
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },



            //修改信息
            checkUpdate(id){
                this.personId = id;
                // alert(this.personId)
                // this.showEdit = true;
                // this.personCard = true;
            },

            //修改个人信息模板
            updatePersonalData(data) {
                // 用PATCH方式调用后端接口
                this.$axios.patch(`/api/personaldata/manage/update/${data.id}`, data).then((res) => {
                    if (res.data.status === 1) {
                        // 如果创建成功
                        this.updatePerson = res.data.data;
                        this.inforChildrenData(this.intoChildrenData.fatherId);
                        this.updatePerson = {};
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },

            //根据出生日期计算年龄
            getAge(birthDate) {
                if (birthDate == null) {
                    return '';
                }
                let birthdays = new Date(birthDate.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                return age;
            },

            //显示添加祖宗的卡片
            ancestorsShow() {
                this.intoAncestorsData.adminId = this.userInfo.id;
                this.intoAncestorsCard = true;
                this.cardShow = true;
            },

            //添加祖宗第一代
            getIntoAncestors() {
                this.loadingCard = true;
                this.$axios.post('/api/personaldata/intoancestors', this.intoAncestorsData)
                    .then((res) => {
                        this.loadingCard = false;
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);
                            this.intoAncestorsCard = false;
                            this.cardShow = false;
                            //添加成功后刷新树状列表
                            this.showTree();
                            this.intoAncestorsData = {};
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            },

            //跳转到查阅族谱的页面 ——> 查看个人信息详情
            checkPersonDate(id) {
                this.$router.push({path: '/LookGenealogy', query: {id: id}});
            },

            //    获取树状列表，以及用户token
            showTree() {
                this.$axios.get('/api/user/token', {headers: {TOKEN: this.token}}).then(res => {
                    this.userInfo = res.data.data;
                    //展示族系树状列表
                    this.$axios.get('/api/personaldata/checkchildreninfo?adminId=' + this.userInfo.id).then(res => {
                        if (res.data.status === 1) {
                            this.personInfo = res.data.data;
                            this.loadingTree = false;
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                });
            },

            //根据父代id添加配偶
            intoSpouse() {
                // this.loadingCard = true;
                // if(this.personDate.spouseId != null){
                //     alert("aaa");
                //     return null;
                // }
                this.$axios.post('/api/personaldata/intospouse', this.intoSpouseData)
                    .then((res) => {
                        this.loadingCard = false;
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);
                            this.spouseCard = false;
                            this.cardShow = false;
                            this.inforChildrenData(this.intoChildrenData.fatherId);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            },


            //根据父代id添加子代
            intoChildren() {
                this.loadingCard = true;
                this.$axios.post('/api/personaldata/intochildren', this.intoChildrenData)
                    .then((res) => {
                        if (res.data.status === 1) {
                            this.loadingCard = false;
                            this.$message.success(res.data.msg);
                            this.accordion = 'false';
                            this.showTree();
                            this.childrenCard = false;
                            this.cardShow = false;
                            this.inforChildrenData(this.intoChildrenData.fatherId);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            },

            //根据父代id查出所有的子孙及配偶
            inforChildrenData(e) {
                let param = {
                    fatherId: e,
                    spouseId: e,
                }
                this.$axios.get('/api/personaldata/checkcs', {params: param})
                    .then((res) => {
                        if (res.data.status === 1) {
                            this.loadingTable = false;
                            // this.personDate = res.data.data;
                            let list = res.data.data;
                            list.forEach(element => {
                                element["showEdit"] = false
                            });
                            this.personDate = list;
                            this.$message.success(res.data.msg);
                        } else {
                            alert(e)
                            this.$message.error(res.data.msg);
                        }
                    })
            },
            filterNode(value, personInfo) {
                if (!value) return true;
                return personInfo.name.indexOf(value) !== -1;
            },
            handleFullscreen() {

            },
            /**
             *  获取列表上姓名的id
             */
            checkId(e) {
                this.currentPerson = e;
                this.loadingTable = true;
                this.id = e.id
                this.intoChildrenData.fatherId = e.id
                this.intoChildrenData.adminId = this.userInfo.id;

                this.intoSpouseData.spouseId = e.id;
                this.intoSpouseData.adminId = this.userInfo.id;
                // alert(this.id)
                this.inforChildrenData(this.id);
                this.buttonDiv = true;
            },
        }
    }
</script>

<style lang="scss">
    #ManagementGenealogy {
        height: 100%;
        background-color: white;

        .el-form .el-input__inner {
            width: 250px !important;
        }

        .el-card__header {
            background-color: cornsilk;
        }

        .el-card__body {
            padding: 20px 80px !important;
        }

        .intoChildrenCard {
            width: 500px;
            position: absolute !important;
            top: 15%;
            left: 40%;
        }
    }
</style>